<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

export default {
    data() {
        return {
            tableData:{
                id:"",
                title:"",
                content:"",
                status:"已反馈",
                opinion:"",
                reflectDate:"",
                feebackDate:"",
                organizerId:"",
                organizerName:"",
                receiverId:"",
                receiverName:""
            },
            loading: false,
        };
    },
    computed: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
	},
    components: { Splitpanes , Pane },
    mounted() {
        let element=document.getElementsByClassName('textarea-status')
        if(this.tableData.status == '未处理'){
            element[0].setAttribute('style','color:#ff4d4d;')
        }
        else if(this.tableData.status=='已反馈'){
            element[0].setAttribute('style','color:#95d475;')
        }
    },
    methods: {
        
    },
}
</script>
<template>
    <splitpanes class="default-theme">
		<pane size="100">
			<el-container class="jp-container">
                <el-main class="nopadding page2">
                    <div class="main-container">
                        <table>
                            <tr class="email-tr">  
                                <th>反映标题</th>  
                                <td><textarea class="textarea-title" v-model="tableData.title"></textarea></td>  
                            </tr>
                            <tr class="email-tr">  
                                <th>发起人ID</th>  
                                <td><textarea class="textarea-title" v-model="tableData.title"></textarea></td>  
                            </tr>
                            <tr >  
                                <th>反映内容</th>  
                                <td>
                                    <textarea class="textarea-content" v-model="tableData.content"></textarea>
                                </td>  
                            </tr>  
                            
                            <tr>  
                                <th>交办意见</th>  
                                <td>
                                    <textarea class="textarea-opinion" v-model="tableData.opinion"></textarea>
                                </td>  
                            </tr>  
                            <tr class="email-tr">  
                                <th>办理进程</th>  
                                <td><textarea class="textarea-status" readonly v-model="tableData.status"></textarea></td>  
                            </tr>  
                            <tr class="email-tr">  
                                <th>反映时间</th>  
                                <td><textarea class="textarea-title" readonly v-model="tableData.reflectDate"></textarea></td>  
                            </tr>  
                            <tr class="email-tr">  
                                <th>反馈时间</th>  
                                <td><textarea class="textarea-title" readonly v-model="tableData.feebackDate"></textarea></td>  
                            </tr>  
                        </table> 
                    </div>  
                </el-main>
            </el-container>
        </pane>
    </splitpanes>
</template>
<style scoped>
.main-container{
    width: 100%;
    height: 100%;
}
table {  
    width: 100%;
    height: 100%;
    border-collapse: collapse;  
}  
.email-tr{
    height: 50px;
}
th, td {  
    padding: 8px;  
    text-align: left;  
    border-bottom: 1px solid #ddd;
}
  
th { 
    width: 80px;
    background-color: #f2f2f2;  
}  

td,th {  
    font-size: 14px;  
}  
  
/* 可选：增加响应式布局调整 */  
@media (max-width: 700px) {  
    th, td {  
        display: block;  
        width: 100%;
    }
    td{
        height: calc(100% - 50px);
    }
    th::after {  
        content: ":";  
    }  
  
    th, td::before {  
        float: left;  
        font-weight: bold;  
    }  
  
    /* 清除浮动 */  
    th, td {  
        clear: both;  
    }  
}
.email-button{
    margin: 15px;
    display: flex;
    justify-content: end;
}
textarea{
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: left;
    color: #515a6e;
    display: block;
    margin: 0 auto;
    border: none;
    resize: none;  
    line-height: 1.4;
}
.textarea-opinion{
    color: #ff4d4d;
}
.textarea-title,.textarea-status{
    overflow: hidden;
    height: 20px;
}
</style>